<template>
  <div class="slideshow" @mouseout="hiddenSideBut" @mousemove="showSideBut">
    <div class="twoSide" @click="throttle(privPic)">
      <img style="transform: rotate(180deg);" src="/src/assets/images/index/home/arrow-left-bold.svg" v-show="data.show">
    </div>
    <div class="fixed">
      <img v-for="(item, index) in data.imgList" :key="index" :src="item"
        :class="data.showIndex == index ? 'slideImg' : 'hidImg'" alt="该图片无法显示">
        <!-- <img :src="data.imgList[data.showIndex]" alt="该图片无法显示" class="slideImg"> -->
    </div>
    <div class="twoSideRight" @click="throttle(nextPic)">
      <img src="/src/assets/images/index/home/arrow-left-bold.svg" v-show="data.show">
    </div>
    <div class="choose">
      <li v-for="(item, index) in data.imgList.length" :key="index" @click="data.showIndex = index"
        :class="[index == data.showIndex ? 'chosen' : '']">
      </li>
    </div>
    <div class="text">
      <p class="title">Up Learning</p>
      <p>欢迎使用高校实践项目交流学习平台！</p>
    </div>
    <!-- <div class="twoSide">
      <li  v-show="data.show" class="sideBut" @click="throttle(privPic)">&lt;</li>
      <li  v-show="data.show" class="sideBut" @click="throttle(nextPic)">&gt;</li>
    </div> -->
  </div>
  <div class="carton"></div>
</template>
<script>
import { onMounted, reactive, onUpdated } from 'vue'
import p1 from '/src/assets/images/index/home/slideshow1.jpg'
import p2 from '/src/assets/images/index/home/slideshow2.jpg'
import p3 from '/src/assets/images/index/home/slideshow3.jpg'
export default {
  setup(props) {
    const data = reactive({
      url: p1,
      imgList: [p1, p2, p3],      //图片数组
      showIndex: 0,
      flag: true,
      show: true
    })

    const slideshowPlayer = function () {
      setInterval(() => {
        nextPic()
      }, 5000)
    }

    //上一张图还是下一张图
    function changePic(index) {
      if (index == 1) {
        throttle(nextPic);
      }
      else {
        throttle(privPic);
      }
    }

    //节流函数触发点击切换图片时间,防止重复点击
    function throttle(fun) {
      let flag = 1;
      if (flag) {
        flag = false;
        fun(); // 此为模板中传递进来的prevFun()或nextFun()函数
        setTimeout(() => {
          flag = true;
        }, 1200); // 节流间隔时间
      }
    }

    // 播放下一张
    const nextPic = function () {
      if (data.showIndex !== data.imgList.length - 1) {
        data.showIndex++;
      }
      else {
        data.showIndex = 0
      }
    }

    //返回上一张
    const privPic = function () {
      if (data.showIndex !== 0) {
        data.showIndex--;
      }
      else {
        data.showIndex = data.imgList.length - 1;
      }
    }

    //鼠标经过显示两侧按钮
    const showSideBut = function () {
      data.show = true;
    }

    //鼠标离开消失按钮
    const hiddenSideBut = function () {
      data.show = false;
    }
    onMounted(() => {
      slideshowPlayer();
    })
    return { data, throttle, privPic, nextPic, hiddenSideBut, showSideBut }
  }
}
</script>
<style scoped>
.slideshow {
  width: 100%;
  height: 340px;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  background-color: #b7b7b9;

}

.slideImg {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: 1s;
  position: absolute;
  z-index: 10;
  /* 淡入淡出过渡时间 */
}

.fixed {
  position: fixed;
  height: 340px;
  width: 80%;
  min-width: 1000px;
  top: 60px;
}

/* 图片选中样式(继承上方默认样式) */
.hidImg {
  opacity: 0;
  z-index: 1;
  position: absolute;
}

.text {
  text-align: center;
  position: absolute;
}

.text p {
  font-family: Source Han Sans CN;
  font-size: 40px;
  font-stretch: normal;
  line-height: 68px;
  letter-spacing: 0px;
  color: #fafafa;
  font-weight: bold;
}

.title {
  font-family: Source Han Sans CN;
  font-size: 42px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 71px;
  letter-spacing: 0px;
  color: #fafafa;
}

.choose {
  display: flex;
  justify-content: left;
  flex-direction: row;
  width: 100px;
  position: absolute;
  bottom: -7%;
  z-index: 100;
  left: 48%;
}

.choose li {
  flex: 1;
  cursor: pointer;
  color: #d8d8d8;
  opacity: 0.8;
}


.chosen {
  color: #707070 !important;
}

.twoSide,
.twoSideRight {
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  opacity: 0.5;
  align-items: center;
  cursor: pointer;
}

.twoSide {
  left: 0%;
}

.twoSideRight {
  right: 0%;
}

.twoSide img,
.twoSideRight img {
  width: 50px;
  height: 50px;
}
</style>
